<!-- Always shows a header, even in smaller screens. -->
<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
  <header class="mdl-layout__header " [ngClass]="{hide: isAPageWithHeaderBar()}">
    <div class="mdl-layout__header-row">

      <!-- Title -->
      <div>
        <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
        </ng2-alfresco-userinfo>
      </div>&nbsp;&nbsp;
      <span class="mdl-layout-title">POLICY AND <br> CLAIM CENTER</span>
      <!-- Add spacer, to align navigation to the right -->

      <div class="mdl-layout-spacer"></div>



      <!-- Navigation. We hide it in small screens. -->
      <!--<nav class="mdl-navigation mdl-layout--large-screen-only">-->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
        <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/my-tasks" *ngIf="!adminUser"><span class="mdl-badge" attr.data-badge={{taskCount}}>My Inbox</span></a>
        <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/tasks" *ngIf="adminUser"><span class="mdl-badge" attr.data-badge={{taskCount}}>To Do List</span></a>

        <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/start/new-policy" *ngIf="adminUser">Create New Policy</a>
        <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/policies" *ngIf="!adminUser">My Policies</a>

        <div><a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/claims" *ngIf="!adminUser">My Claims</a></div>
      </nav>

      <!-- Right aligned menu below button -->
      <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
              <i class="material-icons">more_vert</i>
          </button>

      <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">
        <a class="mdl-menu__item" data-automation-id="home" href="" routerLink="/">Home</a>


        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/my-tasks" *ngIf="!adminUser">My Inbox</a>
        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/tasks" *ngIf="adminUser">To Do List</a>

        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/start/new-policy">Create New Policy</a>
        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/start/new-claim" *ngIf="!adminUser">Start New Claim</a>

        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/policies" *ngIf="!adminUser">My Policies</a>
        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/policies" *ngIf="adminUser">All Policies</a>


        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/claims" *ngIf="!adminUser">My Claims</a>
        <a class="mdl-menu__item" data-automation-id="activiti" href="" routerLink="/claims" *ngIf="adminUser">All Claims</a>

        <a class="mdl-menu__item" data-automation-id="files" href="" routerLink="/files" *ngIf="adminUser && platforms==='ALL'">Underwriting</a>

        <a class="mdl-menu__item" data-automation-id="activiti" href="" (click)="onLogout($event)">Logout </a>


      </ul>


    </div>
  </header>


  <div class="mdl-layout__drawer">
    
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()"><i class="material-icons home--card__icon">home</i>&nbsp;&nbsp;&nbsp;&nbsp; Home</a>

      <a class="mdl-navigation__link" href="" routerLink="/my-tasks" (click)="hideDrawer()" *ngIf="!adminUser"><i class="material-icons home--card__icon">assignment</i>&nbsp;&nbsp; My Inbox</a>
      <a class="mdl-navigation__link" href="" routerLink="/tasks" (click)="hideDrawer()" *ngIf="adminUser"><i class="material-icons home--card__icon">assignment</i>&nbsp;&nbsp; To Do List</a>

      <a class="mdl-navigation__link" href="" routerLink="/start/new-policy" (click)="hideDrawer()"><i class="material-icons home--card__icon">add_circle</i>&nbsp;&nbsp; Create New Policy</a>
      <a class="mdl-navigation__link" href="" routerLink="/start/new-claim" (click)="hideDrawer()" *ngIf="!adminUser"><i class="material-icons home--card__icon">create_new_folder</i>&nbsp;&nbsp; Start New Claim</a>
     
      <a class="mdl-navigation__link" href="" routerLink="/policies" (click)="hideDrawer()" *ngIf="!adminUser"><i class="material-icons home--card__icon">gavel</i>&nbsp;&nbsp; My Policies</a>
      <a class="mdl-navigation__link" href="" routerLink="/policies" (click)="hideDrawer()" *ngIf="adminUser"><i class="material-icons home--card__icon">gavel</i>&nbsp;&nbsp; All Policies</a>
      <a class="mdl-navigation__link" href="" routerLink="/claims" (click)="hideDrawer()" *ngIf="!adminUser"><i class="material-icons home--card__icon">monetization_on</i>&nbsp;&nbsp; My Claims</a>
      <a class="mdl-navigation__link" href="" routerLink="/claims" (click)="hideDrawer()" *ngIf="adminUser"><i class="material-icons home--card__icon">monetization_on</i>&nbsp;&nbsp; All Claims</a>

      <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()" *ngIf="adminUser && platforms==='ALL'"><i class="material-icons home--card__icon" >folder</i>&nbsp;&nbsp;&nbsp;&nbsp; Underwriting</a>

    </nav>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" (click)="onLogout($event)">
        <label tabindex="0"><i class="material-icons home--card__icon" >exit_to_app</i>&nbsp;&nbsp;&nbsp;&nbsp; Logout</label>
      </a>
    </nav>
  </div>


  <main class="mdl-layout__content">
    <div class="page-content">
      <router-outlet></router-outlet>
    </div>
  </main>
</div>